const { createComponent, createApp, ref } = Vue

// 计数器组件
const Counter = {
    template: `
        <div class="counter-display">
            <span class="counter-label">恭喜你，你已经写了</span>
            <span class="counter-text">{{ count }}</span>
            <span class="counter-label">斤代码！</span>
        </div>
        <div class="counter-btns">
            <button class="btn" @click="increase">写一斤</button>
            <button class="btn" @click="reset">删库啦</button>
        </div>
    `,
    // 其实这个 setup 函数其实是包含了 vue2.x 中 data 属性，methods 方法的定义
    setup() {
        // 创建一个响应式的对象
        const count = ref(0) // 在data(){return {count: 0}} 初始化值为 0
        console.log("count ref",count)

        // 操作函数 就相当于在 methods: {increase(){}, reset(){}}
        const increase = () => { count.value++ }
        const reset = () => { count.value = 0 }

        // 导出模块访问
        return { count, increase, reset }
    }
}

// 创建一个 跟组件 app
const App = createComponent({
    // 这个就相对于 在另一个 .vue 文件 引用 Counter 组件，需要在 components 属性局部注册组件
    components: {
        Counter,
    },
    // 挂载到 App 模板中
    template: `
        <div class="container">
            <h3>计数器示例</h3>
            <Counter />
        </div>
    `
})

// 启动
// container 就是相当于 new Vue() 中 el 元素
const container = document.querySelector("#app")
// createApp() 就是相当于 new Vue() 内部返回的就是 new Vue()
const app = createApp()
// 挂载组件
app.mount(App, container)